@import '../variables.scss';

$white: nth($white, 1);
$gray: nth($grays, 3);
$blue: nth($blue, 2);

// 通用
* {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  vertical-align: middle;
}

.el-input,
.el-select,
.el-pagination,
.el-button {
  height: 32px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 14px;
  border-radius: 0;
  outline: 0;
  display: inline-block;

  & /deep/ span {
    font-size: 14px;
  }
}

.el-button {
  border-radius: 4px;
}

.el-switch {
  height: 25px;
}

// 穿透
.el-input /deep/ input,
.el-select /deep/ input,
.el-pagination /deep/ input,
.el-textarea /deep/ textarea {
  outline: 0;
  border-radius: 0 !important;
  height: 32px;
  vertical-align: middle;
}

.el-button /deep/ i,
.el-button /deep/ span {
  vertical-align: middle;
}

.el-pagination /deep/ .el-pagination__jump {
  height: 32px;
  margin-top: -2px;
  margin-left: 15px;
}

// 页面
.container {
  margin-bottom: 0px !important;
  padding: 30px 30px 30px 30px;
  background: unquote('#f0f2f5');
  position: relative;

  .intro {
    background: unquote('#000');
    border: 1px solid $gray;
    padding: 0 20px;
    font: bold 18px 微软雅黑;
    color: $white;
  }

  &-big {
    font: bold 24px 微软雅黑;
  }

  margin-bottom: 20px;
}

.content {
  @media (min-width: $screen-sm-min) {
    min-height: 350px;
  }

  @media (min-width: $screen-md-min) {
    min-height: 540px;
  }

  @media (min-width: $screen-lg-min) {
    min-height: 820px;
  }

  .content-spe {
    @media (min-width: $screen-sm-min) {
      min-height: 350px;
    }

    @media (min-width: $screen-md-min) {
      min-height: 540px;
    }

    @media (min-width: $screen-lg-min) {
      min-height: 820px;
    }

    margin-bottom: 1px;
    background: $white;
    padding: 0 20px 0px 20px;

    &-title {
      font: bold 20px 微软雅黑;
      display: inline-block;
      padding-bottom: 10px;
      border-bottom: 3px solid unquote('#409eff');
      color: unquote('#409eff');
      margin: 25px 0;
    }

    &-element {
      padding: 0 20px 20px 20px;
    }
  }
}

.table-filter {
  padding: 0px !important;
  border: 1px solid $gray;
  margin-bottom: 30px;

  &-header {
    padding: 15px 20px 15px 20px;
    vertical-align: middle;
    background: unquote('#f2f2f2');

    .el-button {
      margin-top: -1px;
    }

    &-search {
      float: right;
      margin-top: -5px;

      &-arrow {
        display: inline-block;
        height: 32px;
        padding-left: 15px;
        border: 1px solid unquote('#dcdfe6');
        border-radius: 4px;
        background: $white;

        &:hover {
          color: unquote('#409eff');
          border-color: unquote('#c6e2ff');
          background-color: unquote('#ecf5ff');
        }

        &:active {
          color: unquote('#3a8ee6');
          border-color: unquote('#3a8ee6');
        }

        vertical-align: middle;

        i {
          vertical-align: middle;
        }
      }

      .el-button-withArrow {
        border: 0;
        background-color: rgba(255, 255, 255, 0);
        margin-left: -15px;
        vertical-align: middle;
      }
    }
  }

  &-content {
    background: $white;
    padding: 0 25px;
    vertical-align: middle;
    border-top: 1px solid $gray;

    .el-button {
      height: 35px;
    }

    &-inner {
      margin: 20px 0;
    }

    .el-form {
      display: inline-block;
      margin-right: 10px;

      &-item {
        display: inline-block;
        height: 32px;
        margin: 0;

        &:not(:first-child) {
          margin-left: 20px;
        }
      }

      /deep/ label {
        font-weight: normal;
        padding: 0;
        line-height: 32px;
      }

      .el-input,
      .el-select {
        margin-top: -8px;
        width: 150px;
      }
    }

    span {
      margin-right: 10px;
    }

    &-result {
      padding: 3px 10px;
      background: $white;
      border: 1px solid $gray;

      &:hover {
        background: unquote('#f0f2f5');
        cursor: pointer;
      }

      display: inline-block;
      height: 32px;
    }

    .buttonNewTableData {
      float: right;
    }
  }
}

.table-filter-advanced {
  display: inline-block;
  padding: 0px !important;
  width: 60%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  top: 20%;
  z-index: 20;

  &-header {
    background: unquote('#f2f2f2');
    padding: 15px 10px 15px 20px;

    &-close {
      float: right;
      cursor: pointer;
    }
  }

  &-content {
    background: $white;
    padding: 30px 25px 40px;
    border-top: 1px solid $gray;
    border-bottom: 1px solid $gray;

    .el-row {
      &:not(:first-child) {
        margin-top: 30px;
      }

      .el-input {
        margin-top: 10px;
      }

      .el-select {
        width: 100%;
        margin-top: 10px;
      }
    }
  }

  &-search {
    background: $white;
    padding: 25px 25px;
    text-align: right;
  }
}


// 表格
.table-content {
  padding-bottom: 20px;

  .table-content-header {
    background: unquote('#f2f2f2');
    padding: 15px 10px 15px 20px;
    border-top: 1px solid $gray;
    border-left: 1px solid $gray;
    border-right: 1px solid $gray;
    vertical-align: middle;
    position: relative;

    &-radios {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      right: 10px;
    }

    &-search {
      float: right;
      margin-top: -5px;
      height: 32px;

      span {
        margin-left: 5px;
        display: inline-block;
        height: 32px;
        font-size: 14px;
        padding: 5px 10px;
        background: $white;
        border: 1px solid $gray;

        &:hover {
          background: unquote('#f0f2f5');
          cursor: pointer;
        }
      }
    }
  }

  /*动态表格*/
  .table-grid-contain {
    .table-content-spe {
      .el-table--border {
        border-top: 1px solid $gray;
        border-left: 1px solid $gray;
        border-right: 1px solid $gray;
        border-bottom: 0px solid $gray;
      }
    }

    .table-footer-container {
      border-left: 1px solid $gray;
      border-right: 1px solid $gray;
      border-bottom: 1px solid $gray;
    }
  }

  .table-content-spe {
    .el-table--border {
      border-top: 1px solid $gray;
      border-left: 1px solid $gray;
      border-right: 1px solid $gray;
      border-bottom: 0px solid $gray;
    }

    .inline-edit {
      color: unquote('#2e68aa');
      text-decoration: none;
      display: inline-block;
      width: 100%;
      cursor: pointer;
      height: 100%;
    }

    .el-input {
      width: 50%;

      & /deep/ input {
        float: left;
        text-align: center;
        display: inline-block;
      }
    }

    .buttonSort {
      float: right;
      display: inline-block;
    }
  }

  .table-content-page {
    vertical-align: middle;
    padding: 12px 20px 12px 20px;
    border-left: 1px solid $gray;
    border-right: 1px solid $gray;
    border-bottom: 1px solid $gray;

    &-search {
      margin-left: 5px;
    }

    .el-button {
      margin-top: -1px;
    }

    .el-pagination {
      display: inline-block;
      float: right;
    }
  }
}

// 表单
.form-filter {
  padding: 0px !important;
  border: 1px solid $gray;

  &-header {
    padding: 15px 20px 15px 20px;
    vertical-align: middle;
    background: unquote('#f2f2f2');

    &-search {
      float: right;
      margin-top: -5px;

      &-arrow {
        display: inline-block;
        height: 32px;
        padding-left: 15px;
        border: 1px solid unquote('#dcdfe6');
        border-radius: 4px;
        background: $white;

        &:hover {
          color: unquote('#409eff');
          border-color: unquote('#c6e2ff');
          background-color: unquote('#ecf5ff');
        }

        &:active {
          color: unquote('#3a8ee6');
          border-color: unquote('#3a8ee6');
        }

        vertical-align: middle;

        i {
          vertical-align: middle;
        }
      }

      .el-button-withArrow {
        border: 0;
        background-color: rgba(255, 255, 255, 0);
        margin-left: -15px;
        vertical-align: middle;
      }
    }
  }

  &-content {
    background: $white;
    padding: 0 25px;
    vertical-align: middle;
    border-top: 1px solid $gray;

    &-inner {
      margin: 20px 0;
    }

    .el-input {
      display: inline-block;
      width: 150px;
    }

    .el-select {
      width: 150px;
    }

    .el-button {
      margin-top: -1px;
    }

    span {
      margin-right: 10px;
    }

    &-result {
      padding: 3px 10px;
      background: $white;
      border: 1px solid $gray;

      &:hover {
        background: unquote('#f0f2f5');
        cursor: pointer;
      }

      display: inline-block;
      height: 32px;
    }
  }
}

.form-content {
  margin-top: 30px;

  &-header {
    background: unquote('#f2f2f2');
    padding: 15px 10px 15px 20px;
    vertical-align: middle;
    border: 1px solid $gray;
    border-bottom: 0;

    &-search {
      float: right;
      margin-top: -5px;
      height: 32px;

      span {
        margin-left: 5px;
        display: inline-block;
        height: 32px;
        font-size: 14px;
        padding: 5px 10px;
        background: $white;
        border: 1px solid $gray;

        &:hover {
          background: unquote('#f0f2f5');
          cursor: pointer;
        }
      }
    }
  }

  &-spe {
    .el-table {
      font-size: 14px;

      td span {
        font-size: 14px;
      }

      th,
      td {
        border: 1px solid $gray !important;
      }

      button {
        font-size: 12px;
      }
    }

    .el-input /deep/ input {
      text-align: center;
      border: 0;
      background-color: rgba(255, 255, 255, 0);

      &:hover {
        cursor: pointer;
      }

      &:focus {
        border: 1px solid unquote('#409eff');
        background-color: $white;
      }
    }
  }

  &-page {
    vertical-align: middle;
    padding: 15px 20px 15px 20px;
    border: 1px solid $gray;
    border-top: 0;

    &-search {
      margin-left: 5px;
    }

    .el-button {
      margin-top: -1px;
    }

    .el-pagination {
      display: inline-block;
      float: right;
    }
  }

  &-submit .el-button {
    height: 40px;
  }

  &-expand {
    .el-input {
      width: 100%;
    }

    .el-input /deep/ input {

      // border: 1px solid unquote('#dcdfe6');
      &:hover {
        cursor: pointer;
      }

      &:focus {
        border: 1px solid unquote('#409eff');
        background-color: $white;
      }
    }
  }
}

.el-collapse {
  .content-spe {
    border: 0;
    padding: 0;

    &-element {
      padding: 0;
    }

    &-title {
      display: none;
    }
  }

  /deep/ .el-collapse-item__content {
    padding-bottom: 10px;
  }
}

// 富文本
.el-form /deep/ .mce-fullscreen {
  z-index: 1002;
}

// 上传
.avatar {
  width: 178px;
  height: 178px;
  display: block;

  &-uploader {
    & /deep/ img {
      border-radius: 0;
      margin: 0;
    }

    & /deep/ .el-upload-dragger {
      width: 180px;
      height: 180px;
    }

    .el-upload {
      border: 1px dashed unquote('#d9d9d9');
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:hover {
        border-color: unquote('#409eff');
      }
    }

    &-icon {
      font-size: 28px;
      color: unquote('#8c939d');
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    &-tip {
      font-size: 12px;
      color: unquote('#909399');
    }
  }
}

// codeMirror
.vue-codemirror-wrap /deep/ {
  .CodeMirror {
    height: 600px;
    overflow: auto;
    overflow-x: hidden;
  }

  .CodeMirror-scroll {
    min-height: 300px;

    .CodeMirror-line>span {
      padding-left: 30px;
      white-space: pre;
    }
  }

  .CodeMirror-gutters {
    display: none;
  }

  .cm-s-rubyblue span.cm-string,
  .cm-s-monokai span.cm-string {
    color: unquote('#f08047');
  }

  .cm-s-cobalt span.cm-string {
    color: unquote('#ff00f2');
  }

  .cm-s-mbo span.cm-string,
  .cm-s-ambiance span.cm-string {
    color: unquote('#fffb00');
  }
}

.CodeMirror {
  border: 1px solid unquote('#eee');
  height: auto;

  &-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
  }
}

// 表格筛选
.filter-container {
  padding: 20px; // text-align: center;

  .el-form {
    width: 100%;

    .filter-container-name {
      width: 300px;
      margin-bottom: 30px;

      .el-input {
        width: 300px;
      }

      /deep/ .el-form-item__label {
        text-align: left;
      }
    }

    .filter-container-title {
      padding: 10px 0;
      margin-top: 20px;
      border-top: 1px solid unquote('#d6d6db');
    }

    .el-select {
      width: 100%;
    }

    .el-button {
      padding: 7px;
      width: 30%;
      min-width: 30px;
      display: inline-block;
      margin: 0;
    }
  }
}

// 滚动条样式
.CodeMirror-vscrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(64, 158, 255, 0.5);
  outline: 1px solid slategrey;
  border-radius: 5px;
}

.CodeMirror-vscrollbar::-webkit-scrollbar {
  width: 10px;
}

// 过渡
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: unquote('#000');
  opacity: 0.7;
  z-index: 10;
}

.fade {

  /*高级筛选*/
  &-filterAdvanced-enter-active,
  &-filterAdvanced-leave-active {
    transition: all 0.5s ease;
  }

  &-filterAdvanced-enter,
  &-filterAdvanced-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }

  /*背景蒙层*/
  &-mask-enter-active,
  &-mask-leave-active {
    transition: all 0.5s;
  }

  &-mask-enter,
  &-mask-leave-to {
    opacity: 0;
  }
}

// dialog
.container /deep/ {
  .el-dialog {
    .el-dialog__body {
      box-sizing: content-box !important;
    }
  }
}
